<template>
    <div class="modal fade" id="add_customer" tabindex="-1" role="dialog"
         aria-labelledby="add_customer">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="popup_box">
                        <div class="g-form-line">
                            <div class="newListBox">
                                <div class="newList_left">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">
                                        <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                    </span>
                                    </button>
                                    <img src="../../assets/images/home_image/info_portrait.png" alt=""
                                         class="newList_left_img">
                                    <p>新增客户</p>
                                </div>
                                <div class="newList_right">
                                    <ul>
                                        <li><span>客户名称 <b class="requiredSign">*</b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="text" v-model="name">
                                                </label>
                                            </div>
                                        </li>
                                        <li><span> 登录账号 <b class="requiredSign">*</b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="text" placeholder="必须为邮箱号" v-model="email">
                                                </label>
                                            </div>
                                        </li>
                                        <li><span>登录密码 <b class="requiredSign">*</b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="password" placeholder="密码长度不能大于20" v-model="password">
                                                </label>
                                            </div>
                                        </li>
                                        <li><span>确认密码 <b class="requiredSign">*</b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="password" v-model="rPassword">
                                                </label>
                                            </div>
                                        </li>
                                        <li><span>联系人 <b></b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="text" v-model="linkman">
                                                </label>
                                            </div>
                                        </li>
                                        <li><span>联系电话 <b></b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="text" v-model="phoneNum">
                                                </label>
                                            </div>
                                        </li>
                                        <li><span>地址 <b></b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="text" v-model="address">
                                                </label>
                                            </div>
                                        </li>
                                        <li><span>时区 <b></b></span>
                                            <div class="myDiv">
                                                <label>
                                                    <input type="text" readonly v-model="timeZone" class='timeZone'>
                                                </label>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="dropdown">
                                    <span class=" dropdown-toggle disabled text_9" type="button" id="dropdownMenu1"
                                          data-toggle="dropdown"
                                          aria-haspopup="true" aria-expanded="true">
                                          <img src="../../assets/images/home_image/transfer_pull.png" alt=""
                                               class="text_9_img">
                                    </span>
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                            <li @click="getTime($event)" v-for="tab in tabs"><a
                                                href="#">{{tab.text}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-success" @click="addCustomer">确定</button>
                                        <button type="button" class="btn btn-success export" data-dismiss="modal">取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            dealerId: {
                type: [String, Number],
                default: 1
            }
        },
        data () {
            return {
                name: '',
                email: '',
                password: '',
                rPassword: '',
                linkman: '',
                phoneNum: '',
                address: '',
                timeZone: '',
                tabs: [
                    {text: '(UTC-12:00)国际日期变更线西'},
                    {text: '(UTC-11:00)萨摩亚群岛'},
                    {text: '(UTC-11:00)协调世界时-11'},
                    {text: '(UTC-10:00)夏威夷'},
                    {text: '(UTC-09:00)阿拉斯加'},
                    {text: '(UTC-08:00)太平洋时间 (美国和加拿大)'},
                    {text: '(UTC-08:00)下加利福尼亚州'},
                    {text: '(UTC-07:00)奇瓦瓦、拉巴斯、马萨特兰'},
                    {text: '(UTC-07:00)山地时间 (美国和加拿大)'},
                    {text: '(UTC-07:00)亚利桑那'},
                    {text: '(UTC-11:00)(UTC-06:00)瓜达拉哈拉、墨西哥城、蒙特雷'},
                    {text: '(UTC-06:00)萨斯喀彻温'},
                    {text: '(UTC-06:00)中部时间 (美国和加拿大)'},
                    {text: '(UTC-06:00)中美洲'},
                    {text: '(UTC-05:00)波哥大、利马、基多'},
                    {text: '(UTC-05:00)东部时间 (美国和加拿大)'},
                    {text: '(UTC-05:00)印第安那州(东部)'},
                    {text: '(UTC-04:30)加拉加斯'},
                    {text: '(UTC-04:00)大西洋时间(加拿大)'},
                    {text: '(UTC-04:00)库亚巴'},
                    {text: '(UTC-04:00)乔治敦、拉巴斯、马瑙斯、圣胡安'},
                    {text: '(UTC-04:00)圣地亚哥'},
                    {text: '(UTC-04:00)亚松森'},
                    {text: '(UTC-03:30)纽芬兰'},
                    {text: '(UTC-03:00)巴西利亚'},
                    {text: '(UTC-07:00)山地时间 (美国和加拿大)'},
                    {text: '(UTC-03:00)格陵兰'},
                    {text: '(UTC-03:00)卡宴、福塔雷萨'},
                    {text: '(UTC-03:00)蒙得维的亚'},
                    {text: '(UTC-02:00)协调世界时-02'},
                    {text: '(UTC-02:00)中大西洋'},
                    {text: '(UTC-01:00)佛得角群岛'},
                    {text: '(UTC-01:00)亚速尔群岛'},
                    {text: '(UTC+01:00)都柏林、爱丁堡、里斯本、伦敦'},
                    {text: '(UTC+01:00)卡萨布兰卡'},
                    {text: '(UTC+01:00)蒙罗维亚、雷克雅未克'},
                    {text: '(UTC+01:00)协调世界时'},
                    {text: '(UTC+01:00)阿姆斯特丹、柏林、伯尔尼、罗马、斯德哥尔摩、维也纳'},
                    {text: '(UTC+01:00)协调世界时'},
                    {text: '(UTC+01:00)贝尔格莱德、布拉迪斯拉发、布达佩斯、卢布尔雅那、布拉格'},
                    {text: '(UTC+01:00)布鲁塞尔、哥本哈根、马德里、巴黎'},
                    {text: '(UTC+01:00)萨拉热窝、斯科普里、华沙、萨格勒布'},
                    {text: '(UTC+01:00)温得和克'},
                ],
                msgModal: {
                    error: '',
                    success: ''
                }
            }
        },
        methods: {
            getTime (event) {
                this.timeZone = event.target.innerHTML
            },
            addCustomer () {
                if (this.name === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.registerMsg.emptyName})
                    return
                }
                let regName = /^[\u4e00-\u9fa5a-zA-Z0-9_]{1,10}$/g
                if (this.name !== '' && !regName.test(this.name)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.registerMsg.name})
                    return
                }
                if (this.email === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.email.emptyEmail})
                    return
                }
                let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (!regEmail.test(this.email)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.email.errEmail})
                    return
                }
                if (this.password.length > 20) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.password.pwdLength})
                    return
                }
                if (this.password !== '' && this.password !== this.rPassword) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.password.diff})
                    return
                }
                let regPhone = /^1[3|4|5|8][0-9]\d{8}$/g
                if (this.phoneNum !== '' && !regPhone.test(this.phoneNum)) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.phoneError})
                    return
                }
                let params = {
                    superiorId: this.dealerId,
                    userEmail: this.email,
                    userPwd: this.password,
                    type: 2,
                    userNickname: this.name,
                    dealerAddress: this.address,
                    dealerPhone: this.phoneNum,
                    linkman: this.linkman,
                }
                this.$ajax
                    .userInfo
                    .addUser(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.addSuc})
                            this.$emit('refreshMenu')
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#add_customer').modal('hide')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    label {
        margin: 0;
    }

    .g-form-line {
        padding: 0;
        overflow-y: hidden;
        text-align: center;
    }

    .modal-body {
        padding: 0;
    }

    .newListBox {
        float: left;
        width: 580px;
        height: 463px;
    }

    .newList_left {
        float: left;
        width: 200px;
        height: 463px;
        background: #263238;
        font-size: 16px;
        text-align: center;
    }

    .newList_right {
        float: left;
        width: 370px;
        height: 463px;
        padding-top: 30px;
        font-size: 12px;
        color: rgb(153, 153, 153);
    }

    .newList_right span {
        height: 20px;
        width: 90px;
        line-height: 20px;
        display: inline-block;
        text-align: left;
        font-weight: normal;
    }

    .newList_right li {
        line-height: 39px;
        height: 39px;
    }

    .closeBtn {
        position: fixed;
    }

    .newList_left_img {
        padding-top: 147px;
    }

    .newList_left p {
        color: rgb(23, 210, 156);
        margin-top: 18px;
        font-size: 14px;
    }

    .newList_right input {
        border: 0;
        width: 200px;
        overflow: hidden;
        color: rgb(23, 210, 156);
        margin-bottom: -10px;
    }

    .newList_right .myDiv {
        width: 220px;
        height: 90%;
        display: inline-block;
        border-bottom: solid 1px;
        border-color: rgb(204, 204, 204);
        text-align: left;
        line-height: 30px;
        overflow: hidden;
        margin-bottom: 0;
        vertical-align: bottom;
    }

    .dropdown {
        position: absolute;
        z-index: 10;
        top: 325px;
        left: 300px;
        width: 15px;
        height: 15px;
        background: white;
        margin-left: 10px;
    }

    #dropdownMenu1 {
        width: 15px;
        height: 15px;
        background: white;
    }

    .newList_right .text_9 {
        border: 0;
        line-height: 20px;
        text-align: center;
        cursor: not-allowed;
        position: absolute;
        top: -6px;
    }

    .newList_right .text_9_img {
        padding-left: 200px;
    }

    .newList_right .dropdown-menu {
        position: fixed;
        top: 360px;
        overflow: scroll;
        height: 250px;
        left: 300px;
    }

    .modal-footer {
        border: 0;
    }
</style>
